<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>投票管理</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<form class="layui-form">

    <button type="button" class="layui-btn" id="addVote">
        <i class="layui-icon">&#xe608;</i> 创建投票活动
    </button>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <input style="width: 300px" type="text" id="value" name="value" lay-verify="required" placeholder="请输入投票活动名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" id="search">搜索</button>

    <button type="button" class="layui-btn" id="exportExcelAllBtn">
        <i class="layui-icon">&#xe67d;</i> 导出Excel
    </button>
</form>

<table id="voteTable" lay-filter="voteTable"></table>


<!-- 添加页面开始 -->
<form class="layui-form" id="addVoteForm" lay-filter="addVoteForm" style="display: none;padding: 20px 55px 0px 0px">
    <div class="layui-form-item">
        <label class="layui-form-label">活动名称</label>
        <div class="layui-input-block">
            <input type="text"  name="projectName" lay-verify="required" placeholder="请输入活动名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">投票方式</label>
        <div class="layui-input-block">
            <input type="radio" name="projectPublic" value="0" title="匿名投票">
            <input type="radio" name="projectPublic" value="1" title="实名投票" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">投票类型</label>
        <div class="layui-input-block">
            <input type="radio" name="projectChoice" value="0" title="单选">
            <input type="radio" name="projectChoice" value="1" title="多选" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">限投次数</label>
        <div class="layui-input-block">
            <input type="number" name="projectRule" lay-verify="required|number" placeholder="请输入限投次数" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动封面</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadadd">
                <i class="layui-icon">&#xe67c;</i>上传封面
            </button>
            <input type="hidden" name="projectImg" value="" id="projectImg">
            <img src='' height='50px' id="addImg"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动描述</label>
        <div class="layui-input-block">
            <textarea name="projectDesc" lay-verify="required" placeholder="请输入活动描述" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">展示形式</label>
        <div class="layui-input-block">
            <input type="radio" name="projectShow" value="0" title="计数制" checked>
            <input type="radio" name="projectShow" value="1" title="百分比">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动时间</label>
        <div class="layui-input-block">
            <input type="text" id="projectStart" autocomplete="off" name="projectStart" lay-verify="required" placeholder="请选择活动时间" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit  lay-filter="addVoteSubmit">立即添加</button>
            <button type="button" id="closeVoteAdd" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 添加页面结束 -->

<!-- 编辑页面开始 -->
<form class="layui-form" id="amendVoteForm" lay-filter="amendVoteForm" style="display: none;padding: 20px 55px 0px 0px">
    <input type="hidden" id="id" name="id" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">活动名称</label>
        <div class="layui-input-block">
            <input type="text"  name="projectName" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">投票方式</label>
        <div class="layui-input-block">
            <input type="radio" name="projectPublic" value="匿名投票" title="匿名投票">
            <input type="radio" name="projectPublic" value="实名投票" title="实名投票" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">投票类型</label>
        <div class="layui-input-block">
            <input type="radio" name="projectChoice" value="单选" title="单选">
            <input type="radio" name="projectChoice" value="多选" title="多选" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">限投次数</label>
        <div class="layui-input-block">
            <input type="number" name="projectRule" lay-verify="required|number" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动封面</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadAmend">
                <i class="layui-icon">&#xe67c;</i>上传封面
            </button>
            <input type="hidden" name="projectImg" value="" id="projectImgAmend">
            <img src='' height='50px' id="amendImg"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动描述</label>
        <div class="layui-input-block">
            <textarea name="projectDesc" lay-verify="required"  class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">展示形式</label>
        <div class="layui-input-block">
            <input type="radio" name="projectShow" value="计数制" title="计数制" checked>
            <input type="radio" name="projectShow" value="百分比" title="百分比">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活动时间</label>
        <div class="layui-input-block">
            <input type="text" id="projectEnd" autocomplete="off" name="projectEnd" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit  lay-filter="amendVoteSubmit">确认修改</button>
            <button type="button" id="closeVoteAmend" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 编辑页面结束 -->

<!-- 投票选项页面开始 -->
<div style="margin: 10px; display: none" id="optionView" lay-filter="optionView">
    <form class="layui-form">
        <button type="button" class="layui-btn" id="addOption">
        <i class="layui-icon">&#xe608;</i> 新增选项</button>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input style="width: 300px" type="text" id="optionContent" name="content" lay-verify="required" placeholder="请输入选项名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        <button type="button" class="layui-btn" id="optionSearch">搜索</button>
    </form>

    <table id="optionTable" lay-filter="optionTable"></table>
</div>
<!-- 投票选项页面结束 -->

<!-- 添加选项页面开始 -->
<div  style="margin: 10px; display: none" id="addOptionView" lay-filter="addOptionView">
    <form class="layui-form">
        <input type="hidden" name="projectId" id="projectId" value="">
        <div class="layui-form-item">
            <label class="layui-form-label">选项名称</label>
            <div class="layui-input-block">
                <input type="text"  name="optionName" lay-verify="required" placeholder="请输入选项名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="optionUpload">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input type="hidden" name="optionImg" value="" id="optionImg">
                <img src='' height='50px' id="addOptionImg"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit  lay-filter="addOptionSubmit">立即添加</button>
                <button type="button" id="closeOptionAdd" class="layui-btn layui-btn-primary">关闭</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加选项页面结束 -->

<!-- 编辑选项页面开始 -->
<div  style="margin: 10px; display: none" id="amendOptionView" lay-filter="amendOptionView">
    <form class="layui-form" id="amendOptionFrom" lay-filter="amendOptionFrom">
        <input type="hidden" name="id" id="id" value="">
        <div class="layui-form-item">
            <label class="layui-form-label">选项名称</label>
            <div class="layui-input-block">
                <input type="text"  name="optionName" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="optionAmendUpload">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input type="hidden" name="optionImg" value="" id="optionAmendImg">
                <img src='' height='50px' id="amendOptionImg"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit  lay-filter="amendOptionSubmit">确认修改</button>
                <button type="button" id="closeOptionAmend" class="layui-btn layui-btn-primary">关闭</button>
            </div>
        </div>
    </form>
</div>
<!-- 编辑选项页面结束 -->

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

    layui.use(['table','form','layer','laydate','upload','element'],function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var element = layui.element;
        table.render({
            elem:'#voteTable'
            ,url:'admin-vote/list'
            ,page:true
            ,limit:8
            ,limits:[6,8,10,15]
            ,cols:[[
                {field:'id',title:'编号',sort:true, width:80, align:'center'}
                ,{field:'username', title:'创建人', align:'center'}
                ,{field:'projectName',title:'活动名称', align:'center'}
                ,{field:'projectImg',title:'活动图片',align:'center',templet:function (d) {
                        return "<img src='"+d.projectImg+"' height='50px'/>";
                    }, width:120}
                ,{field:'projectPublic',title:'投票权限', align:'center', width:100}
                ,{field:'projectChoice',title:'类型', align:'center', width:80}
                ,{field:'projectShow',title:'展示', align:'center',width:80}
                ,{field:'projectRule',title:'限投量', align:'center', width:80}
                ,{field:'projectOption',title:'选项量', align:'center', width:80}
                ,{field:'projectVote',title:'投票量', align:'center', width:80}
                ,{field:'projectView',title:'浏览量', align:'center', width:80}
                ,{field:'projectStatus',title:'状态',align:'center',templet:function (d) {
                    if (d.projectStatus == '未开始'){
                        return "<span style='color: #ee6666;'>"+ d.projectStatus +"</span>";
                    }else if (d.projectStatus == '进行中') {
                        return "<span style='color: #8f93f6;'>"+ d.projectStatus +"</span>";
                    }else if (d.projectStatus == '已结束') {
                        return "<span style='color: #84be6e;'>"+ d.projectStatus +"</span>";
                    }}, width:80}
                ,{field:'projectStart',title:'开始时间',align:'center'}
                ,{field:'projectEnd',title:'结束时间',align:'center'}
                ,{toolbar: '#barDemo',title:'操作', align:'center', width:160}
            ]]
        });

        /**
         * 搜索功能
         * */
        $("#search").click(function () {
            var value = $("#value").val();
            if(value == ""){
                table.reload("voteTable",{
                    url:'admin-vote/list',
                    page:{
                        curr:1
                    },
                    where:{
                        column:null,
                        value:null
                    }
                });
            }else{
                table.reload("voteTable",{
                    url:'admin-vote/list',
                    where:{
                        column: "project_name",
                        value: value
                    }
                });
            }
        });

        /**
         * 点击添加按钮弹出层展示添加页面
         * */
        $("#addVote").click(function () {
            layer.open({
                type:1,
                area:['760px','80%'],
                title:['创建投票活动','font-size:18px;color:orange;'],
                content:$("#addVoteForm"),
            });
        });
        /**
         * 渲染添加页面的头像上传
         * */
        upload.render({
            elem:'#uploadadd'
            ,url:'admin-vote/upload'
            ,done: function(result){
                if(200 == result.code){
                    $("#addImg").prop("src",result.data);
                    $("#projectImg").val(result.data);
                }
            }
        });
        /**
         * 监听添加用户页面的 立即添加 按钮
         * */
        form.on("submit(addVoteSubmit)",function (obj) {
            layer.confirm("你确定要创建投票活动吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'admin-vote/insert',
                    data:obj.field,
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        if(200 == data.code){
                            obj.form.reset();
                            layer.closeAll();
                            table.reload("voteTable");
                            layer.msg("创建投票活动成功！",{icon:'1',title:'提示',closeBtn :'1'});
                        }
                    }
                });
            });
            return false;
        });

        //日期范围
        laydate.render({
            elem: '#projectStart'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            ,range: true
            ,type: 'datetime'
            ,min:0
            ,max:30
        });

        //日期范围
        laydate.render({
            elem: '#projectEnd'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            ,range: true
            ,type: 'datetime'
            ,min:0
            ,max:30
        });

        /**
         * 各个页面的一些关闭按钮
         * */
        $("#closeVoteAdd").click(function () {
            layer.closeAll();
        });
        $("#closeVoteAmend").click(function () {
            layer.closeAll();
        });

        /**
         * 导出Excel表格功能
         * */
        $("#exportExcelAllBtn").click(function () {
            layer.confirm("你确定要导出Excel表格吗？",{icon:'3',title:'提示'},function () {
                location.href='admin-vote/exportExcel';
                layer.closeAll();
            })
        });

        /**
         * 监听table的查看编辑删除按钮的单击事件
         * */
        table.on('tool(voteTable)',function (obj) {
            var data = obj.data;
            //编辑按钮的单击事件
            if(obj.event=='edit'){
                form.val("amendVoteForm",data);
                $("#amendImg").prop("src", data.projectImg);
                $("#projectEnd").val(data.projectStart + " - " + data.projectEnd);

                layer.open({
                    type:1,
                    title:['编辑投票活动信息','font-size:18px;color:orange;'],
                    area:['760px', '80%'],
                    content:$("#amendVoteForm"),
                });
            }
            //删除按钮的单击事件
            if(obj.event=='delete'){
                layer.confirm("你确定要删除投票活动吗",{icon:'3',title:'提示'},function () {
                    $.ajax({
                        url:'admin-vote/delete',
                        data:{
                            id: data.id
                        },
                        type:"delete",
                        dataType:"json",
                        success:function (result) {
                            if(200 == result.code){
                                table.reload("voteTable",{
                                    page:{
                                        curr:1
                                    }
                                });
                                layer.msg("删除投票活动成功！",{icon:'1',title:'提示',closeBtn :'1'});
                            }
                        }
                    });
                })
            }
            //查看
            if(obj.event=='view'){
                layer.open({
                    type:1,
                    title:['投票活动选项信息','font-size:18px;color:orange;'],
                    area:['80%', '80%'],
                    content:$("#optionView"),
                });
                table.render({
                    elem:'#optionTable'
                    ,url:'admin-vote/option-list'
                    ,where: {
                        id : data.id
                    }
                    ,page:true
                    ,limit:6
                    ,limits:[4,6,8,10]
                    ,cols:[[
                        {field:'id',title:'编号',sort:true, width:80, align:'center'}
                        ,{field:'optionName', title:'选项名称', align:'center'}
                        ,{field:'optionImg',title:'选项图片',align:'center',templet:function (d) {
                                return "<img src='"+d.optionImg+"' height='50px'/>";
                            }}
                        ,{field:'country',title:'票数',align:'center',templet:function (d) {
                                return "<div class=\"layui-progress layui-progress-big\">\n" +
                                    "  <div class=\"layui-progress-bar layui-bg-blue\" lay-percent='"+ d.optionGrade +"%'>"+ d.optionGrade +"票</div>\n" +
                                    "</div>";
                            }}
                        ,{field:'country',title:'浏览量',align:'center',templet:function (d) {
                                return "<div class=\"layui-progress layui-progress-big\">\n" +
                                    "  <div class=\"layui-progress-bar layui-bg-green\" lay-percent='"+ d.optionView +"%'>"+ d.optionView +"次</div>\n" +
                                    "</div>";
                            }}
                        ,{toolbar: '#barOption',title:'操作', align:'center'}
                        ,
                    ]]
                    ,done:function (res,currentCount) {
                        //table渲染完成后渲染element进度条
                        element.render()
                    }
                });
                /**
                 * 选项搜索功能
                 * */
                $("#optionSearch").click(function () {
                    var value = $("#optionContent").val();
                    if(value == ""){
                        table.reload("optionTable",{
                            url:'admin-vote/option-list',
                            page:{
                                curr:1
                            },
                            where:{
                                id:data.id,
                                content:null
                            }
                        });
                    }else{
                        table.reload("optionTable",{
                            url:'admin-vote/option-list',
                            where:{
                                id: data.id,
                                content: value
                            }
                        });
                    }
                });

                /**
                 * 点击选项添加按钮弹出层展示添加页面
                 * */
                var addOptionIndex = null;
                $("#addOption").click(function () {
                    $("#projectId").val(data.id);
                    addOptionIndex = layer.open({
                        type:1,
                        area:['50%','50%'],
                        title:['创建投票活动','font-size:18px;color:orange;'],
                        content:$("#addOptionView"),
                        id:'addOptionLayer'
                    });
                });
                /**
                 * 渲染选项添加页面的头像上传
                 * */
                upload.render({
                    elem:'#optionUpload'
                    ,url:'admin-vote/option-upload'
                    ,done: function(result){
                        if(200 == result.code){
                            $("#addOptionImg").prop("src",result.data);
                            $("#optionImg").val(result.data);
                        }
                    }
                });
                /**
                 * 监听选项添加用户页面的 立即添加 按钮
                 * */
                form.on("submit(addOptionSubmit)",function (obj) {
                    layer.confirm("你确定要新增选项吗？",{icon:'3',title:'提示'},function () {
                        $.ajax({
                            url:'admin-vote/insert-option',
                            data:obj.field,
                            type:"post",
                            dataType:"json",
                            success:function (data) {
                                if(200 == data.code){
                                    obj.form.reset();
                                    $("#addOptionImg").prop("src", "");
                                    layer.close(addOptionIndex);
                                    table.reload("optionTable");
                                    layer.msg("新增选项成功！",{icon:'1',title:'提示',closeBtn :'1'});
                                }
                            }
                        });
                    });
                    return false;
                });

                /**
                 * 监听选项table的查看编辑删除按钮的单击事件
                 * */
                var amendOptionIndex = null;
                table.on('tool(optionTable)',function (obj) {
                    var data = obj.data;
                    //编辑按钮的单击事件
                    if (obj.event == 'editOption') {
                        form.val("amendOptionFrom", data);
                        $("#amendOptionImg").prop("src", data.optionImg);

                        amendOptionIndex = layer.open({
                            type: 1,
                            title: ['编辑选项信息', 'font-size:18px;color:orange;'],
                            area: ['50%', '50%'],
                            content: $("#amendOptionView"),
                            id:'amendOptionLayer'
                        });
                    }
                    //删除按钮的单击事件
                    if (obj.event == 'deleteOption') {
                        layer.confirm("你确定要删除选项信息吗", {icon: '3', title: '提示'}, function () {
                            $.ajax({
                                url: 'admin-vote/delete-option',
                                data: {
                                    id: data.id
                                },
                                type: "delete",
                                dataType: "json",
                                success: function (result) {
                                    if (200 == result.code) {
                                        table.reload("optionTable", {
                                            page: {
                                                curr: 1
                                            }
                                        });
                                        layer.msg("删除选项信息成功！", {icon: '1', title: '提示', closeBtn: '1'});
                                    }
                                }
                            });
                        })
                    }
                });

                /**
                 * 渲染选项修改页面的图片上传
                 * */
                upload.render({
                    elem:'#optionAmendUpload'
                    ,url:'admin-vote/option-upload'
                    ,done: function(result){
                        if(200 == result.code){
                            $("#amendOptionImg").prop("src",result.data);
                            $("#optionAmendImg").val(result.data);
                        }
                    }
                });

                /**
                 * 监听选项修改页面的确认修改按钮
                 * */
                form.on("submit(amendOptionSubmit)",function (obj) {
                    layer.confirm("你确定要修改选项信息吗？",{icon:'3',title:'提示'},function () {
                        $.ajax({
                            url:'admin-vote/update-option',
                            data:obj.field,
                            type:"put",
                            dataType:"json",
                            success:function (data) {
                                if(200 == data.code){
                                    obj.form.reset();
                                    layer.close(amendOptionIndex);
                                    table.reload("optionTable");
                                    layer.msg("修改选项信息成功！",{icon:'1',title:'提示',closeBtn :'1'});
                                }
                            }
                        });
                    })
                    return false;
                });

                /**
                 * 选项页面的一些关闭按钮
                 * */
                $("#closeOptionAdd").click(function () {
                    layer.close(addOptionIndex);
                });
                $("#closeOptionAmend").click(function () {
                    layer.close(amendOptionIndex);
                });


            }
        });

        /**
         * 渲染修改页面的头像上传
         * */
        upload.render({
            elem:'#uploadAmend'
            ,url:'admin-vote/upload'
            ,done: function(result){
                if(200 == result.code){
                    $("#amendImg").prop("src",result.data);
                    $("#projectImgAmend").val(result.data);
                }
            }
        });

        /**
         * 监听修改页面的确认修改按钮
         * */
        form.on("submit(amendVoteSubmit)",function (obj) {
            layer.confirm("你确定要修改活动信息吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'admin-vote/update',
                    data:obj.field,
                    type:"put",
                    dataType:"json",
                    success:function (data) {
                        if(data.code==200){
                            obj.form.reset();
                            layer.closeAll();
                            table.reload("voteTable");
                            layer.msg("修改活动信息成功！",{icon:'1',title:'提示',closeBtn :'1'});
                        }
                    }
                });
            })
            return false;
        });

    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="editOption">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteOption">删除</a>
</script>

</body>
</html>